<!-- From Uiverse.io by Shubh0408  - Tags: checkbox, tailwind, tailwindcss -->
<div class="flex justify-center items-center">
  <label class="container">
    <input
      value="wedding-gift"
      class="peer cursor-pointer hidden after:opacity-100"
      checked="checked"
      type="checkbox"
    />
    <span
      class="inline-block w-5 h-5 border-2 relative cursor-pointer after:content-[''] after:absolute after:top-2/4 after:left-2/4 after:-translate-x-1/2 after:-translate-y-1/2 after:w-[10px] after:h-[10px] after:bg-[#333] after:rounded-[2px] after:opacity-0 peer-checked:after:opacity-100"
    ></span>
  </label>
</div>


    